<!-- 主页组件 -->
<template>
    <div style="background: #f4f4f4;">
        <div style="padding:0 1vw 0 0vw ;">
            <div style="width: 98.9vw; ">
                <el-carousel height="70vh" > 
                    <el-carousel-item  v-for="(item,i) in imgitme" :key="i">
                        <a href="https://www.baidu.com/"><img :src="item" alt="item.url" style="position: absolute;" ></a> 
                    </el-carousel-item>
                </el-carousel>
                <div style="padding:0 1vw 0 12vw ;">
                    <div style="margin-top: 3vh;">  
                    <h2 style="margin-right: 8vw;">热门课程</h2>
                    <div style="display: flex;">
                        <div v-for="(itme,i) in  courses" :key="i" style="width: 19.5vw; padding: 1vw;">
                            <div style="float: left;width: 17vw;" >
                                <img :src="itme.url" alt="" class="coursesimg" @click="imgrouter(i)">
                            </div>
                            <div style="background-color: white;">
                                <span style="font-size: 23px;">{{itme.title}}</span>
                            <div style="display: flex;margin-top: 2vh;">
                                <span style="color:rgba(148, 146, 146, 0.8);">{{itme.data}}人已学习</span>
                                <div class="biaoqian">免费</div>
                            </div>
                            </div>
                        </div>
                    </div>
               </div>
               <div>
                <h2 style="margin-right: 8vw;">名师大咖</h2>
                <div style="display: flex;">
                    <div v-for="(itme,i) in  tachers" :key="i" class="tachersdiv">
                    <div style=" text-align: center;">
                        <img :src="itme.img" alt="" style="width: 14vw;height: 33vh;border-radius: 50% 50% 50% 50%; "/>
                        <h3>{{ itme.name }}</h3>
                        <h4 style="text-align: left; margin-left: 6.4vw;">{{itme.title }}</h4>
                    </div>
                    <el-divider></el-divider>
                    <p>{{itme.course}}</p>
                </div>
                </div>
               </div>
               <br>
               <div></div>
                </div>
        </div> 
    </div>

    </div>
 
  
        
 
 
</template>

<script>
import axios from 'axios'
export default {
    name:'home',
    data() {
        return {
            loginstart:0,
            imgitme:[
             require("../../../assets/img/lunbo/02.jpg"),
             require("../../../assets/img/lunbo/04.jpg"),
             require("../../../assets/img/lunbo/05.jpg"),
             require("../../../assets/img/lunbo/deb032253cb6db81481c1353c0d0fd25.jpg")
            ],
            courses:[
                {url:"http://182.61.38.67/zxjy/img/01.jpg",title:"30天JAVA技术",data:3322,},
                {url:"http://182.61.38.67/zxjy/img/02.jpg",title:"Linux集群教程",data:2342,},
                {url:"http://182.61.38.67/zxjy/img/04.jpg",title:"RBAC权限模型",data:4122,},
                {url:"http://182.61.38.67/zxjy/img/05.jpg",title:"springMVC",data:3121,},
            ],
            tachers:[
                {img:'http://182.61.38.67/zxjy/img/teacher/teacher1.jpg',name:'柴老师',title:'高级讲师',course:'曾参与国家电网内蒙古供电企业一体化管理信息系统的研发、国土资源局的国土资源非空间数据服务系统的研发等，并为新华南方等众多IT企业储备人才及广东、山东等多所高校大学生进行实训授课.'},
                {img:'http://182.61.38.67/zxjy/img/teacher/teacher2.jpg',name:'李老师',title:'高级讲师',course:'原百度UE讲堂高级设计讲师、HCII国际人机交互学院高级讲师运营设计组负责人，通晓各类设计需求，熟知行业规范，能将国内多个大互联网公司设计工作模式和教学理念相结合。'},
                {img:'http://182.61.38.67/zxjy/img/teacher/teacher3.jpg',name:'武老师',title:'高级讲师',course:'曾任IBM中国开发实验室（CDL）软件工程师、技术总监，精通Linux、C、Java、JavaScript、Solidity、Scala等开发语言，对云计算、大数据、人工智能、区块链技术等有深入研究。'},
                {img:'http://182.61.38.67/zxjy/img/teacher/teacher4.jpg',name:'张老师',title:'高级讲师',course:'精通Java核心框架、大数据Hadoop、Spark技术，先后主持开发中信银行、国家电网、中植集团、东方资产等大型企业的金融类系统，也对时下流行的互联网金融有深入研究，练就了纯厚的技术底蕴和丰富的职场经验。'},
            ],
            drawer: false,
        }
    },
    mounted(){
        var that = this
        axios({
        method: 'get',
        url: 'api/Course',
        }).then(function (res) {
      that.courseData = res.data
      
    })
},
    methods:{
        imgrouter(i){
            console.log(i)
            this.$router.replace('/secondsheets/CourseDetails')
        }
    }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.el-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
p{
    font-size: 12px;
}
h2{
    text-align: center;
}
h3{
    color:#68cb9b ;
}
  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  .coursesimg{
   width: 103%;
  }
.tachersdiv{
    width: 19.5vw; 
    padding: 1vw;  
    margin-top: 3vh; 
}  
.biaoqian{
    width: 3vw; height: 4vh;padding:0.3vw ;margin-left: 7.5vw;bottom: 10%; background-color: #68cb9b;color:white;
}
</style>